@font-face {
  font-family: 'HuXiaoBo-NanShen';
  src: url(./HuXiaoBo-NanShen.otf)
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: Source Han Sans CN;
}
.production-board {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #000E14;
  overflow: hidden;
  /** 标题区域 */
  .board-top {
    width: 100%;
    height: 4rem;
    display: flex;
    margin-bottom: 1.75rem;
    position: relative;
    background: url(../img/main-title.png) no-repeat;
    background-size: cover;
    &-title {
      color: #FFF;
      text-align: center;
      font-size: 2rem;
      font-weight: 700;
      line-height: 4rem;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
    }
    .info {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      line-height: 4rem;
      left: 8.56rem;
      top: 0;
      &-time {
        color: #19D7FC;
        font-weight: 700;
        margin-right: 0.75rem;
      }
      &-line-y {
        width: 0.0625rem;
        height: 1rem;
        background: #34586A;
      }
      &-date {
        color: #19D7FC;
        font-size: 0.75rem;
        margin-left: 0.75rem;
      }
    }
  }
  /** 中间区域 */ 
  .board-main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 1.5rem;
    margin-bottom: 1.5rem;
    /** 左侧数量区 */
    &-left {
      display: flex;
      flex-direction: column;
      // 单个数据盒子
      .box {
        width: 13.25rem;
        padding: 1.75rem 1rem;
        margin-right: 1.5rem;
        margin-bottom: 1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background: url(../img/count-box.png) no-repeat;
        background-size: cover;
        .text {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          &-label {
            color: #B4C0CC;
            font-size: 0.875rem;
            font-weight: 700;
            line-height: 1.375rem;
          }
          &-count {
            font-size: 2rem;
            font-family: HuXiaoBo-NanShen;
            line-height: 3rem;
            &-yellow {
              color: #FAD851;
            }
            &-green {
              color: #49FBA5;
            }
            &-cyan {
              color: #27DCFF;
            }
          }
        }
        .icon {
          width: 5rem;
          height: 5rem;
        }
      }
    }
    /** 订单列表区 */
    &-right {
      flex: 1;
      .list {
        width: 100%;
        &-tr {
          height: 3.375rem;
          & > td {
            background: rgba(6, 40, 51, 0.7);
            padding: 0.94rem 1rem;
            text-align: center;
          }
          &-head {
            height: 3.75rem;
            & > td {
              padding: 1.12rem 1rem;
              text-align: center;
            }
          }
        }
        &-linear-x {
          background: linear-gradient(90deg, #084868 0%, #062C34 100%) !important;
        }
        &-linear-y {
          background: url(../img/thead.png) no-repeat;
          background-position: bottom;
          background-size: cover;
        }
        &-line-x {
          & > td {
            border-bottom: solid #34586A 1px;
          }
        }
        &-line-y {
          background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, rgba(174, 231, 255, 0.00) 0.01%, rgba(120, 211, 250, 0.72) 52.08%, rgba(166, 229, 255, 0.00) 100%);
        }
        &-bg {
          background: rgba(6, 40, 51, 0.70);
        }
      }
      .step {
        padding: 0 !important;
        &-area {
          display: flex;
          width: 100%;
        }
        &-main {
          flex: 1;
          display: flex;
          line-height: 3.25rem;
        }
        .tag {
          width: 2.5rem;
          height: 1.625rem;
          margin: 0 0.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #FFF;
          font-size: 0.8125rem;
          font-weight: 700;
          line-height: 1.5rem;
          &-green {
            border-radius: 6px;
            background: linear-gradient(180deg, #6CC384 0%, #299748 100%);
          }
          &-red {
            border-radius: 6px;
            background: linear-gradient(180deg, #DA6771 0%, #C84852 100%);
          }
          &-area {
            display: flex;
            height: 3rem;
            line-height: 3rem;
            justify-content: center;
            align-items: center;
            background: #000E14;
          }
        }
        &-item {
          flex: 1;
          font-size: 0.875rem;
          font-weight: 700;
          line-height: 1.25rem;
          position: relative;
          padding: 0 1rem;
          display: flex;
          align-items: center;
          & span:last-child {
            margin-left: 0.5rem;
          }
          &-white {
            color: #FFF;
          }
          &-yellow {
            color: #FAD851;
          }
        }
        &-item::after {
          content: '';
          width: 1px;
          height: 100%;
          background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, rgba(174, 231, 255, 0.00) 0.01%, rgba(120, 211, 250, 0.72) 52.08%, rgba(166, 229, 255, 0.00) 100%);
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .text {
        color: #B4C0CC;
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.25rem;
        &-red {
          color: #F24957;
        }
      }
    }
  } 
  /** 底部区域 */
  .board-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 1.5rem;
    .title {
      color: #FFF;
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.875rem;
      padding: 0.62rem 1rem;
      position: relative;
    }
    &-left {
      display: flex;
      flex-direction: column;
      margin-right: 1.5rem;
      flex: 1094;
      .title {
        background: url(../img/left-title.png) no-repeat;
        background-size: cover;
      }
      .title::after {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        background: url(../img/left-title.png) no-repeat;
        background-position: bottom;
        background-size: cover;
        left: 0;
        bottom: 0;
      }
    }
    &-right {
      display: flex;
      flex-direction: column;
      flex: 754;
      .title {
        background: url(../img/right-title.png) no-repeat;
        background-size: cover;
      }
      .title::after {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        background: url(../img/right-title.png) no-repeat;
        background-position: bottom;
        background-size: cover;
        left: 0;
        bottom: 0;
      }
    }
    .content {
      height: 17.75rem;
      /** 轮播数据区 */
      &-left {
        position: relative;
        min-width: 1080px;
        background: url(../img/left-content.png) no-repeat;
        background-size: cover;
        background-position: left bottom;
        overflow-y: hidden;
        .content {
          padding: 1.25rem 0.94rem;
        }
        .scroll-area {
          height: calc(17.75rem - 2.5rem - 2.5rem);
          overflow-y: scroll;
          &::-webkit-scrollbar {
            display: none; /* Chrome Safari */
          }
        }
        .list {
          width: 100%;
          padding: 0 0.94rem;
          &-tr {
            height: 2.5rem;
            padding: 0.6rem 1rem;
            & > td {
              padding: 0.56rem 1rem;
              text-align: center;
              &:nth-child(1) {
                width: 10%;
              }
              &:nth-child(3) {
                width: 15%;
              }
              &:nth-child(4) {
                width: 15%;
              }
              &:nth-child(5) {
                width: 20%;
              }
            }
          }
          &-title {
            background: rgba(39, 220, 255, 0.20);
            color: #B4C0CC;
            font-size: 0.875rem;
            font-weight: 700;
            line-height: 1.3125rem;
            & > td {
              padding: 0.63rem 1rem;
            }
          }
          .text {
            color: #FFF;
            font-size: 0.875rem;
            font-family: Source Han Sans CN;
            font-weight: 500;
            line-height: 1.3125rem;
            &-cyan {
              color: #27DCFF;
            }
            &-red {
              color: #F24957;
            }
          }
        }
      }
      &-left::after {
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        background: url(../img/left-content.png) no-repeat;
        background-position: right bottom;
        background-size: cover;
        right: 0;
        bottom: 0;
      }
      /** 订单汇总区 */
      &-right {
        // min-width: 700px;
        background: url(../img/right-content.png) no-repeat;
        background-size: cover;
        background-position: left bottom;
        display: flex;
        flex-direction: row;
        .content {
          padding: 1.6rem 1.5rem;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .chart {
          flex: 1;
          // &-item {
          //   background: linear-gradient(90deg, #27DCFF 0%, #27DCFF 100%) ;
          // }
          // &-text {
          //   &-mark {
          //     color: #FFF;
          //     font-size: 1.125rem;
          //     font-weight: 700;
          //     line-height: 1rem;
          //   }
          //   &-axis {
          //     color: #A2B0B8;
          //     font-size: 0.875rem;
          //     font-weight: 500;
          //     line-height: 1.25rem;
          //   }
          // }
        }
        .total {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 2rem 1.5rem;
          &-icon {
            width: 6.625rem;
            height: 3.875rem;
            background: url(../img/total-icon.png) no-repeat;
            background-size: cover;
          }
          &-item {
            margin-bottom: 1rem;
            .title, .main {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
            }
            .title-area {
              margin-bottom: 0.7rem;
              width: 13rem;
              // height: 2rem;
              background: url(../img/total-title.png) no-repeat;
              background-size: contain;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              & > .text {
                padding: 0 0.75rem;
              }
            }
            .text {
              color: #FFF;
              font-size: 0.875rem;
              font-weight: 500;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              &-label {
                color: #B4C0CC;
              }
              &-num {
                &-white {
                  font-size: 1.5rem;
                  font-weight: 700;
                }
                &-green {
                  color: #49FBA5;
                  font-size: 1.125rem;
                }
                &-red {
                  color: #F24957;
                  font-size: 1.125rem;
                }
              }
            }
          }
        }
      }
      &-right::after {
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        background: url(../img/right-content.png) no-repeat;
        background-position: right bottom;
        background-size: cover;
        right: 0;
        bottom: 0;
      }
    }
    &-line {
      height: 4px;
      background: url(../img/footer-line.png) no-repeat;
      background-size: cover;
      margin: 0.9rem 1.5rem;
    }
  }
}

@media screen and (max-width: 1800px) {
  html, body {
    font-size: 13px;
  }
  .production-board {
    .board-top {
      .info {
        left: 7.56rem;
      }
    }
    .board-footer {
      .content-left {
        min-width: calc(1050px * 0.8);
      }
    }
  }
}